import React, {Component} from 'react';
import {Modal} from "antd";
import {InfoCircleOutlined} from '@ant-design/icons';

interface SubmitProps {
    visible: boolean
    cancel: any;
    confirm: any;
    title: any;
}

class SubmitModal extends Component <SubmitProps, any> {
    constructor(props) {
        super(props);
    }

    onCancel() {
        this.props.cancel();
    }

    onOK() {
        this.props.confirm();
        this.props.cancel();
    }

    render() {
        return (
            <div>
                <Modal onCancel={this.onCancel.bind(this)}
                       className="auth-modal"
                       footer={null}
                       visible={this.props.visible}
                       width="5.44rem"
                       closable={false}
                       bodyStyle={{
                           height: "2.66rem",
                           backgroundColor: "#ffffff00"
                       }}>
                    <div className="auth-modal-back">
                        <div className="auth-modal-body">
                            <InfoCircleOutlined style={{color: "#efab1a"}}/>
                            <span style={{
                                marginLeft: "0.18rem",
                                fontSize: "0.24rem",
                                color: "#333333",
                                marginTop: "-0.08rem"
                            }}>
                                {this.props.title}
                            </span>
                        </div>
                        <div className="auth-modal-buttons">
                            <button onClick={this.onCancel.bind(this)}>取消</button>
                            <button onClick={this.onOK.bind(this)}>确定</button>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default SubmitModal;